<template>
    <div>
        <el-card>
            <el-button size="default" icon="Plus" type="primary" @click="addtrademark"
                v-has="`btn.Trademark.add`">增加品牌</el-button>
            <el-table border :data="records" style="margin:20px 0">
                <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
                <el-table-column label="品牌名称" property="tmName" align="center"></el-table-column>
                <el-table-column label="品牌LOGO" align="center">
                    <template #="{ row, $index }">
                        <!-- || '@/assets/vue.svg' -->
                        <img :src="row.logoUrl " class="logourlcs" />
                    </template>
                </el-table-column>
                <el-table-column label="品牌操作" align="center">
                    <template #="{ row, $index }">
                        <el-button type="primary" size="default" icon="Edit" @click="updatetrademark(row)">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" icon="DeleteFilled" icon-color="#f56c6c" @confirm="deltrademark(row)">
                            <template #reference>
                                <el-button type="primary" size="default" icon="Delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[3, 5, 7, 9]"
                :background="true" layout="prev, pager,next, jumper,->, sizes,total,  " :total="totle"
                @size-change="handleSizeChange" @current-change="getfenye" />
        </el-card>

        <el-dialog v-model="dialogVisible" :title="trademarParams.id ? '修改品牌' : '增加品牌'">
            <el-form :model="trademarParams" :rules="rules" ref="trademarkFormRef">
                <el-form-item label="品牌名称" prop="tmName">
                    <el-input placeholder="请你输入品牌名称" v-model="trademarParams.tmName"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO" prop="logoUrl">
                    <el-upload class="avatar-uploader" action="/api/admin/product/fileUpload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="trademarParams.logoUrl" :src="trademarParams.logoUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" size="default" @click="cancal">取消</el-button>

                <el-button type="primary" size="default" @click="canfirm">确定</el-button>
            </template>
        </el-dialog>

    </div>
</template>
<script setup>
import { baseTrademark, addsave, update, deletetrademark } from '@/api/product/trademark/index.js'
import { ref, onMounted, reactive, nextTick } from 'vue'

// 当前页数
let pageNo = ref(1);
// 每页显示条数
let limit = ref(3)
// 总条数
let totle = ref(0)
// 数据
let records = ref([])
let trademarkFormRef = ref(null)
const dialogVisible = ref(false)
let trademarParams = reactive({
    id: '',
    tmName: '',
    logoUrl: ''
})
// 自定义校验规则
const validatorLogoUrl = (rule, value, callback) => {
    console.log(1111111111);
    if (!value) {
        callback(new Error('请上传品牌LOGO'))
    } else {
        callback()
    }
}
const rules = ref({
    tmName: [
        { required: true, message: '请输入品牌名', trigger: 'blur' },
    ],
    logoUrl: [
        { required: true, trigger: 'change', validator: validatorLogoUrl },
    ],
})
onMounted(() => {
    getfenye()
})

// 增加品牌
const addtrademark = () => {
    dialogVisible.value = true
    trademarParams.id = ''
    trademarParams.tmName = ''
    trademarParams.logoUrl = ''
    nextTick(() => {
        trademarkFormRef.value.clearValidate()
    })
}
const handleAvatarSuccess = (res, upfile) => {
    console.log(res);
    trademarParams.logoUrl = res.data;
    console.log(upfile);

    trademarkFormRef.value.clearValidate('logoUrl')

}
// 修改品牌
const updatetrademark = (val) => {
    console.log(val);
    dialogVisible.value = true
    trademarParams.id = val.id
    trademarParams.tmName = val.tmName
    trademarParams.logoUrl = val.logoUrl
}
// 删除品牌
const deltrademark = ({ id }) => {
    deletetrademark(id).then(res => {
        console.log(res);
        if (res.code == 200) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getfenye(pageNo.value)
        } else {
            ElMessage({
                message: '删除失败',
                type: 'error',
            })
        }
    })
}
const beforeAvatarUpload = (rawFile) => {
    // 允许的图片格式
    const allowedImageType = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
    if (!allowedImageType.includes(rawFile.type)) {
        ElMessage.error('图片必须是JPG|PNG|GIF格式!')
        uploadFlag.value = false
        return false
    } else if (rawFile.size / 1024 / 1024 > 4) {
        ElMessage.error('图片大小不能超过4MB!')
        uploadFlag.value = false
        return false
    }
    return true
}
// 获取数据
const getfenye = (pager = 1) => {
    pageNo.value = pager
    baseTrademark(pageNo.value, limit.value).then(res => {
        if (res.code == 200) {
            totle.value = res.data.total
            records.value = res.data.records
            console.log(records.value);
        }
    })
}
const handleSizeChange = () => {

    getfenye()
}
// 确认品牌
const canfirm = async () => {
    // 清空表单验证
    await trademarkFormRef.value.validate()
    if (trademarParams.id) {
        update(trademarParams).then(res => {
            if (res.code == 200) {
                dialogVisible.value = false
                ElMessage({
                    message: trademarParams.id ? '修改品牌成功' : '增加品牌成功',
                    type: 'success',
                })
                getfenye(trademarParams.id ? pageNo.value : 1)
            } else {

                ElMessage({
                    message: trademarParams.id ? '修改品牌失败' : '增加品牌失败',
                    type: 'error',
                })
            }
        })
    } else {
        addsave(trademarParams).then(res => {
            if (res.code == 200) {
                dialogVisible.value = false
                ElMessage({
                    message: trademarParams.id ? '修改品牌成功' : '增加品牌成功',
                    type: 'success',
                })
                getfenye(trademarParams.id ? pageNo.value : 1)
            } else {

                ElMessage({
                    message: trademarParams.id ? '修改品牌失败' : '增加品牌失败',
                    type: 'error',
                })
            }
        })
    }

}
const cancal = () => {
    dialogVisible.value = false
}

</script>
<style lang="scss" scoped>
.logourlcs {
    width: 100px;
    height: 100px;
}

.avatar-uploader-icon {

    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    border: 1px solid #8c939d;
}

.avatar {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    border: 1px solid #8c939d;
}
</style>